<template>
    <div class="login">
      <div class="login_box">
          <div class="login_box_left">
              <section style="margin-top: 15%;">
                  <div class="title" v-if="loginType=='登录'">欢迎您登录</div>
                  <div class="company" v-else>{{ company }}</div>
              </section>
              <section>
                  <div class="input_container">
                      <input type="text" v-model="form.user" placeholder="请输入账号">
                  </div>
              </section>
              
              <section>
                  <div class="input_container">
                      <input v-model="form.password" type="password" placeholder="请输入密码">
                  </div>
              </section>
              <section @click="submit()">
                  <button>{{ loginType }}</button>
              </section>
              <section>
                  <div class="other">忘记密码？<span></span></div>
              </section>
          </div>
          <div class="login_box_right" v-loading="loading">
              <img src="../static/bg.png" alt="">
          </div>
      </div>
      <messageComp ref="ref_messageComp"></messageComp>
    </div>
  </template>
  
  <script setup>
  import axios from "axios"
  import { ref,getCurrentInstance, onMounted } from "vue"
  import { useStore } from "vuex";
  import messageComp from "../components/messageComp.vue";
  const ref_messageComp = ref(null) //弹窗message组件refs
  const store = useStore()
  const { ctx } = getCurrentInstance()
  import { useRouter,useRoute } from "vue-router";
  const router = useRouter()
  const route = useRoute()
      //数据
      let loginType = ref('登录')
      let company = ref('注册方式')
      let loading = ref(false)
      let form = ref({}) //表单数据
      // 登录或者注册
      const submit = ()=>{
          loading.value = true
          if (loginType.value == '登录') {
              if (form.value.user != undefined && form.value.password != undefined) {
                loginAIP()
              }else{
                ref_messageComp.value.messageFail('请先填写您的账号及密码！')
                loading.value = false
              }
          }
      
      }
      const loginAIP = ()=>{
          axios({
              method:'post',
              url:store.state.url + '/users/login',
              data:form.value,
          }).then(res=>{
            console.log('登录结果',res.data);
              if (res.data.code == 200 && res.data.data.type == '管理员') {
                
                store.commit("saveLoginMess",res.data.data)
                loading.value = false
                ref_messageComp.value.notifySuccess('欢迎您回来')
                router.push({path:'/admin'})
                  
              }else if(res.data.data.type != '管理员'){
                    ref_messageComp.value.messageFail('非管理员账号，无法访问')
              }else{
                    ref_messageComp.value.messageFail(res.data.message)
              }
              loading.value = false
  
          }).catch(err=>{
              ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
          })
          
      }
      console.log('看看是不是被强制返回的：',route.query);

    onMounted(()=>{
        if (route.query.isLogin == 'false') {
            ref_messageComp.value.messageFail('禁止访问，请先登录！')
        }
    })

  </script>
  
  <style scoped>
  .login{
      position: relative;
      width: 100%;
      height: 100%;
      user-select: none;
      display: flex;
      justify-content: center;
      place-items: center;
  }
  .login_box{
      position: relative;
      width: 900px;
      height: 400px;
      box-shadow: 0 0 4px #ccc;
      display: flex;
  }
  .login_box>.login_box_left{
      width: 45%;
      height: 100%;
      box-shadow: 40px 0 10px gray;
  }
  section{
      margin-top: 10px;
      width: 100%;
      height: 40px;
      line-height: 50px;
      display: flex;
      /* border: 2px solid ; */
  }
  section>.input_container{
      margin-left: 10%;
      width: 80%;
      height: 100%;
      display: flex;
      justify-content: left;
  }
  section>.input_container>input{
      margin-top: 5px;
      width: 100%;
      padding-right: 10px;
      height: 80%;
      border: 2px solid #edecec;
      outline: none;
      border-radius: 5px;
      text-indent: 7px;
  }
  section>.input_container>input::placeholder{
      text-indent: 10px;
  
  }
  section>button{
      margin-left: 10%;
      width: 80%;
      border: none;
      color: gray;
  }
  section>button:hover{
      transition: all 1s;
      background-color: dodgerblue;
      color: white;
  }
  section>.other{
      position: absolute;
      bottom: 7%;
      width: auto;
      height: 40px;
      margin-left: 10px;
      /* border-bottom: 2px solid #ccc; */
      color: gray;
  }
  span{
      margin-top: -10px;
      width: 0%;
      display: block;
      /* border: 2px solid ; */
  }
  section>.other:hover span{
      transition: all 1s;
      width: 100%;
      border-top: 2px solid #ccc;
  }
  .backLogin{
      position: absolute;
      bottom: 7%;
      width: auto;
      height: 40px;
      margin-left: 10px;
      border-bottom: 2px solid lightgreen;
      color: dodgerblue;
  }
  .title{
      text-align: center;
      width: 100%;
      font-size: 27px;
      color: dodgerblue;
      height: 100%;
  }
  .company{
      width: 80%;
      font-size: 20px;
      color: gray;
      text-align: left;
      margin-left: 10%;
      height: 100%;
      color: dodgerblue;
  }
  
  /* 登录右边盒子 */
  .login_box>.login_box_right{
      width: 55%;
      height: 100%;
      border-left: 10px solid #ccc;
      border-radius: 5px;
      /* box-shadow: -10px 0px 10px gray; */
  }
  .login_box>.login_box_right>img{
      width: 100%;
      height: 100%;
  }
  
  </style>